<template>
  <div class="detail_content">
    <p class="title">| 基本信息</p>
    <el-row class="base_info">
        <el-col :span='3'><span>卡号ID:</span></el-col>
        <el-col :span='9'><p>{{detail.id}}</p></el-col>
        <el-col :span='3'><span>会员卡号:</span></el-col>
        <el-col :span='9'>
           <p>{{detail.card_number}}</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>创建时间:</span></el-col>
        <el-col :span='9'>
            <p>{{detail.create_time}}</p>
        </el-col>
        <el-col :span='3'><span>绑定小店:</span></el-col>
        <el-col :span='9'>
            <p v-if='shop_info.shop_name'>{{shop_info.shop_name}}</p>
            <p v-else>---</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>是否开卡:</span></el-col>
        <el-col :span='9'>
          <p v-if='detail.uid > 0'>已开卡</p>
          <p v-else>未开卡</p>
        </el-col>
        <el-col :span='3'><span>绑定会员账号:</span></el-col>
        <el-col :span='9'><p>{{user_info.username}}</p></el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>会员卡配额:</span></el-col>
        <el-col :span='9'>
           <p v-if='detail.price > 0'>  ¥ {{detail.price}}</p>
           <!-- <p v-if='order_info.actual_amount < 0'> - ¥ {{order_info.actual_amount}}</p>
           <p v-if='order_info.actual_amount == 0'>  ¥ {{order_info.actual_amount}}</p> -->
           <p v-show="!detail.price">---</p>
        </el-col>
        <el-col :span='3'><span>充值状态:</span></el-col>
        <el-col :span='9'>
          <p v-if='user_info.username'>已充值</p>
          <p v-else>未充值</p>
        </el-col>
    </el-row>
  </div>
</template>

<script>
// import {cardXiDetail} from '@/api/member'
export default {
    name: 'member_detail',
  props: [ 'visible', 'currentId'],
   data () {
    return {
      detail: {},
      shop_info:{},
      user_info:{}
    }
  },
  watch: {
    visible (newValue) {
      if(newValue){
        this.getMemberDetailData()
      }
    }
  },
  methods:{
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
          this.$emit('showMemberDetail')
    },
    async getMemberDetailData(){
      let res = await  cardXiDetail({id:this.currentId});
      console.log(res)
      if(res.code === 10000){
        this.detail = res.data
        this.shop_info  = res.data.shop_info
        this.user_info = res.data.user_info
      }else{
        this.$message.error(res.message)
      }
    }
  }
};
</script>


<style scoped lang="scss">
 .detail_content{
     padding: 20px;
     .title{
         font-size: 16px;
     }

     .base_info{
         margin:15px 20px 20px;
         span{
             font-size:12px;
             color: #999999;
         }

         p{
             font-size: 13px;
             color: #333333;
         }
     }
     .order_infomation{
       margin-top: 16px;
     }

     .class_btn{
       margin-top: 30px;
       text-align: center;
     }
 }
</style>

